<!--
    功能待拆分为更细粒度的minxins，方便功能的组合使用
-->
<template>
    <div class="node-panel node-rm">
        <div class="flex-box">
            <div class="flex-1">
                <selectPanel module="subject" :tpl="model.subject_tpl" @select="OnSubjectSelect" :hasPage="true" :title="model.subject_ds_model.name" :model="model.subject_ds_model" :hasFilter="true"></selectPanel>
            </div>
            <div class="flex-1">
                <div class="panel-resource">
                    <div class="panel-resource-header">
                        {{model.resource_ds_model.name}}
                        <div class="pull-right tab-box">
                            <div class="tab-item" @click="ownedClick" :jsonFilter="true" :class="{active:resourceActive==='owned'}">已选项
                                <span class="badge-count" v-if="ownedCount">{{ownedCount}}</span>
                            </div>
                            <div class="tab-item" @click="resourceClick" :class="{active:resourceActive==='resource'}">未选项</div>
                        </div>
                    </div>
                    <!--中间行样式 暂时弃用-->
                    <div v-if="0" class="panel-resource-tab">
                        <div class="tab-item" @click="ownedClick" :class="{active:resourceActive==='owned'}">已选项</div>
                        <div class="tab-item" @click="resourceClick" :class="{active:resourceActive==='resource'}">未选项</div>
                    </div>
                    <selectPanel v-show="resourceActive==='owned'" :tpl="model.resource_tpl" :jsonFilter="true" @rowSort="saveSort" :hasSerial="!!model.sortable" :hasPage="true" module="owned" :model="model.resource_ds_model" :hasFilter="true" :hasSelect="false" fetchMethod="get">
                        <template slot="optrate" slot-scope="item">
                            <div class="item-optrate" :key="item.index" @click="removeItemClick(item.item.id)">
                                <Icon type="android-remove-circle"></Icon>
                            </div>
                        </template>
                    </selectPanel>
                    <selectPanel v-show="resourceActive==='resource'" :tpl="model.resource_tpl" :jsonFilter="true" module="resource" :model="model.resource_ds_model" :hasFilter="true" :hasSelect="false" fetchMethod="get">
                        <template slot="optrate" slot-scope="item">
                            <div class="item-optrate" :key="item.index" @click="addItemClick(item.item.id)">
                                <Icon type="android-add-circle"></Icon>
                            </div>
                        </template>
                    </selectPanel>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import selectPanel from "@/components/selectPagePanel/index";
import moduleStore from "./store";
import base from "../base";
export default {
  extends: base,
  moduleStore,
  props: {
    model: {},
    hasCheck: {
      default: true
    },
    rowCheckMode: {
      default: false
    },
    hasFilter: {
      default: true
    },
    hasAction: {
      default: true
    }
  },
  data() {
    return {
      selectStatus: false,
      resourceActive: "owned",
      resourceLoad: null
    };
  },
  computed: {},
  methods: {
    OnSubjectSelect({ data, index }) {
      this.subjectSelect({ data, index });
      this.resourceActive = "owned";
    },
    ownedClick() {
      this.resourceActive = "owned";
      if (this.inChange) {
        this.fetchOwned();
        this.mappingChange(false);
      }
    },
    addItemClick(id) {
      this.addItem(id);
    },
    removeItemClick(id) {
      this.removeItem(id);
    },
    resourceClick() {
      this.resourceActive = "resource";
      if (!this.resourceLoad) {
        this.fetchResource();
      } else {
        this.resourceLoad = true;
        if (this.inChange) {
          this.fetchResource();
          this.mappingChange(false);
        }
      }
    }
  },
  created() {},
  mounted() {
    this.updateModel(this.model);
  },
  components: {
    selectPanel
  }
};
</script>

<style lang="less">
.node-rm {
  > .flex-box {
    > .flex-1 {
      padding: 10px 10px;
    }
  }
  .item-optrate {
    float: right;
    .ivu-icon {
      font-size: 24px;
      margin-top: -3px;
      /*font-weight: bold;*/
      color: #9ecbfb;
      cursor: pointer;
    }
  }
  .panel-resource {
    height: 100%;
    display: flex;
    flex-direction: column;
    .select-list {
      border-radius: 0;
      border-top: none;
    }
    .panel-resource-header {
      border: 1px solid #e9eaec;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
      padding: 12px 14px;
      font-size: 14px;
      line-height: 1;
      .tab-box {
        .tab-item {
          display: inline;
          padding: 4px 16px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 12px;
          &.active {
            background: #2d8cf0;
            color: #fff;
          }
        }
      }
    }
    .panel-resource-tab {
      padding: 0;
      border-left: 1px solid #e9eaec;
      border-right: 1px solid #e9eaec;
      display: flex;
      .tab-item {
        cursor: pointer;
        padding: 10px 16px 17px 16px;
        line-height: 1;
        font-size: 12px;
        flex: 1;
        &.active {
          background: #2d8cf0;
          color: #fff;
        }
      }
    }
  }
  .select-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    .select-list-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      .select-list-content {
        flex: 1;
      }
      > .search-line {
        border-top: 1px solid #e9eaec;
        border-bottom: 1px solid #e9eaec;
        height: 34px;
        .search-input {
          top: 0;
          .ivu-input {
            top: 0px;
            border: none;
          }
          .ivu-input-group-append {
            border-top: none;
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>
